<!--
* @Description: 趋势标记
* @Version: 1.0.0
-->
<template>
  <span class="oneseve-trend" :class="'oneseve-trend--' + type">
    <el-icon v-if="iconType == 'P'" class="oneseve-trend-icon"><el-icon-top /></el-icon>
    <el-icon v-if="iconType == 'N'" class="oneseve-trend-icon"><el-icon-bottom /></el-icon>
    <el-icon v-if="iconType == 'Z'" class="oneseve-trend-icon"><el-icon-right /></el-icon>
    <em class="oneseve-trend-prefix">{{ prefix }}</em>
    <em class="oneseve-trend-value">{{ modelValue }}</em>
    <em class="oneseve-trend-suffix">{{ suffix }}</em>
  </span>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Number, default: 0 },
  prefix: { type: String, default: "" },
  suffix: { type: String, default: "" },
  reverse: { type: Boolean, default: false },
});

const iconType = computed(() => {
  if (props.modelValue == 0) {
    return "Z";
  } else if (props.modelValue < 0) {
    return "N";
  } else if (props.modelValue > 0) {
    return "P";
  }
});

const type = computed(() => {
  if (props.modelValue == 0) {
    return "Z";
  } else if (props.modelValue < 0) {
    return props.reverse ? "P" : "N";
  } else if (props.modelValue > 0) {
    return props.reverse ? "N" : "P";
  }
});
</script>

<style scoped>
.oneseve-trend {
  display: flex;
  align-items: center;
}

.oneseve-trend-icon {
  margin-right: 2px;
}

.oneseve-trend em {
  font-style: normal;
}

.oneseve-trend-prefix {
  margin-right: 2px;
}

.oneseve-trend-suffix {
  margin-left: 2px;
}

.oneseve-trend--P {
  color: #f56c6c;
}

.oneseve-trend--N {
  color: #67c23a;
}

.oneseve-trend--Z {
  color: #555;
}
</style>
